<template>
    <div class="wrapper">
        <TodoInput />
        <TodoList :todoList="todoList" />
    </div>
</template>

<script lang="ts">
    import { computed, defineComponent, onMounted } from 'vue'
    import { Store, useStore } from 'vuex'
    import { IUseTodo, useTodo } from './hooks/todoList'
    import TodoInput from './components/TodoInput.vue'
    import TodoList from './components/TodoList.vue'

    export default defineComponent({
        name: 'App',
        components: {
            TodoInput,
            TodoList
        },
        setup() {
            const { setTodoList }: IUseTodo = useTodo()
            const store: Store < any > = useStore()
            onMounted(() => {
                setTodoList()
            })

            return {
                todoList: computed(() => store.state.list)
            }
        }
    })
</script>

<style lang="scss">

</style>